<template>
  <div class="recommendation-mv">
    <MusicNav />
    <!-- 第一个大盒子 -->
    <div class="top-section">
      <!-- 轮播图盒子 -->
      <div class="carousel-box">
        <el-carousel 
          :interval="2000" 
          arrow="never" 
          trigger="click"
          height="388px"
        >
          <el-carousel-item v-for="item in carouselList" :key="item.id">
            <div class="carousel-content" :style="{ backgroundImage: `url(${item.imageUrl})` }">
              <div class="carousel-overlay"></div>
              <div class="mv-info">
                <span class="mv-author">{{ item.author }}</span>
                <span class="mv-name">-{{ item.name }}</span>
                <div class="play-icon" @click.stop="playMV(item)">
                  <i class="fas fa-play-circle"></i>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      
      <!-- MV排行榜盒子 -->
      <div class="mv-ranking">
        <div class="ranking-header">
          <h3>MV热播总排行</h3>
        </div>
        <div class="ranking-list">
          <div v-for="(item, index) in mvRankingList" :key="index" class="ranking-item">
            <span class="rank-number" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</span>
            <div class="mv-info">
              <div class="mv-title">{{ item.title }}</div>
                <i class="fas fa-play-circle" @click.stop="playMV(item)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二个大盒子 -->
    <div class="bottom-section">
      <!-- 左侧MV分类 -->
      <div class="mv-categories">
        <div class="category-header">MV分类</div>
        <div class="category-list">
          <div 
            v-for="(category, index) in categories" 
            :key="index" 
            class="category-item"
            :class="{ active: category.active }"
            @click="selectCategory(index)"
          >
            {{ category.name }}
          </div>
        </div>
      </div>

      <!-- 右侧新歌推荐 -->
      <div class="new-songs">
        <div class="section-header">新歌首发{{ newSongsList.length }}个</div>
        <div class="song-grid">
          <div v-for="(song, index) in newSongsList" :key="index" class="song-item">
            <div class="song-cover">
              <img :src="song.cover" :alt="song.title" />
              <div class="play-icon" @click.stop="playMV(song)">
                <i class="fas fa-play-circle"></i>
              </div>
            </div>
            <div class="song-info">
              <div class="song-title">{{ song.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterNotice/>

    <!-- 添加 Dialog 组件 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentMV.title"
      width="800px"
      :before-close="handleClose"
      destroy-on-close
    >
      <video
        ref="videoPlayer"
        :src="currentMV.mv_url"
        controls
        autoplay
        style="width: 100%"
      ></video>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import MusicNav from '@/components/music-nav.vue'
import FooterNotice from '@/components/footer-notice.vue'
// 轮播图数据
const carouselList = ref([
  {
    id: 1,
    name: '去未来一趟 (《熊出没·重启未来》电影主题曲)',
    author: '张杰',
    imageUrl: 'https://mobileservicebssdl.kugou.com/b0e751d85799109f3344bc39bb9ad41b.jpg',
    mv_url:'https://mvwebfs.kugou.com/202503042142/e832e00fa50497d9f199a5023ef48217/KGTX/CLTX002/c6b7122c3394d56bccc2f6fcadd81c86.mp4'

  },
  {
    id: 2,
    name: '《若仙》',
    author: '周深',
    imageUrl: 'https://mobileservicebssdl.kugou.com/b941dbbd7dfad53ba897c625c6fd6cee.jpg',
    mv_url:'https://mvwebfs.kugou.com/202503042143/7df55408157d07348d52383937a8a358/KGTX/CLTX002/5ee95c09b07cd421a40d78e0a2b08974.mp4'
  },
  {
    id: 3,
    name: 'Hearts2Hearts《Chase Your Choice》Debut Trailer',
    author: 'Hearts2Hearts',
    imageUrl: 'https://mobileservicebssdl.kugou.com/92b7ab12c287c88fbf7b8a038c63b3a0.jpg',
    mv_url:'https://mvwebfs.kugou.com/202503042144/79111111111111111111111111111111/KGTX/CLTX002/79111111111111111111111111111111.mp4'
  }
])

// MV排行榜数据
const mvRankingList = ref([
  { 
    title: '我的小猪',
    mv_url: 'https://mvwebfs.kugou.com/202503042145/8d5f01979ce00c21887fc3a8028611ac/KGTX/CLTX002/b4a66e9c7a91c68ff485e4a1b5781e1d.mp4'
  },
  { 
    title: '飞鸟和蝉',
    mv_url: 'https://mvwebfs.tx.kugou.com/202503042146/5a5ab83816fdb604883a0afb4ba52315/v2/88ad6ab573f83cab225941f65f6e53bf/G252/M08/12/09/3JQEAF_0kV2Acy43CRU0YSk_exY250.mp4'
  },
  { title: '《少女的祈祷》剧志家',
    mv_url:'https://mvwebfs.kugou.com/202503042147/99bcdda1f264ace9d76935cdcb009349/KGTX/CLTX002/9c1ff0e671419adec0975d0dae07f8b0.mp4'
   },
  { title: '天下',    mv_url:'https://mvwebfs.kugou.com/202503042147/e16c57734a4d3f364b81dc2d5a989ab8/KGTX/CLTX002/8b054f28be4fce1a7ccc55fa15894c40.mp4' },
  { title: '你的万水千山',    mv_url:'https://mvwebfs.kugou.com/202503042147/8a469f6409d1498a8d56d14ad725bf72/KGTX/CLTX002/0f51c916bd0c8915b92b666a6cf67c5b.mp4' },
  { title: '微微',    mv_url:'https://mvwebfs.kugou.com/202503042147/41aa90250ad06e2a4b5abb42df9f9e35/v2/a9e627f7de825710efe84b4a749dbf37/G227/M05/17/19/g4cBAF7rSpCAYzw3CIe8gdN1igM460.mp4' },
  { title: '暗里着迷（温柔女声版）',    mv_url:'https://mvwebfs.tx.kugou.com/202503042148/c3c963ef27d8c5de60d77b439b508e9d/v2/f6eb094b1cfae26c194d47730b40b527/G227/M01/02/07/g4cBAF9GoxiAfUa9BFF_ykSzc2U367.mp4' },
  { title: '儿童多梦症经典串烧儿歌大全之《小...》',    mv_url:'https://mvwebfs.kugou.com/202503042148/414d97c8c9fcec8fe1cef1d9f8ad1380/KGTX/CLTX002/61257c49b9e449cddd326d728acd1942.mp4' },
  { title: '口是心非',    mv_url:'https://mvwebfs.kugou.com/202503042148/64518eb028c1a2a3a23e2c0138dd351e/KGTX/CLTX002/015e762b0e23415d4b96b452a6ff6daa.mp4' },
  { title: '自己人《最近女生》听说你最近很难...》',    mv_url:'https://mvwebfs.tx.kugou.com/202503042148/66ab77950caed351d3b31f00f950a43e/v2/5b63fb80f7a222412f4d8fe4480d2dc3/G212/M00/02/13/dIcBAF6lA72Abv-sBmfzSdyHfPw792.mp4' }
])

// MV分类数据
const categories = ref([
  { name: '新歌推荐', active: true },
  { name: '华语精选', active: false },
  { name: '日韩精选', active: false },
  { name: '欧美精选', active: false }
])

// 将计算属性改为 ref
const currentCategory = ref('新歌推荐')

const selectCategory = (index: number) => {
  categories.value.forEach((cat, i) => {
    cat.active = i === index
  })
  // 更新当前选中的分类
  currentCategory.value = categories.value[index].name
}

// 新歌数据，按分类组织
const allNewSongs = {
  '华语精选': [
    {
      title: '张韶涵 - 十分钟',
      cover: 'https://p3fx.kgimg.com/mvpic/96/b8/96b8a412baf32ed567f28b78a211f259.jpg',
      mv_url:'https://mvwebfs.tx.kugou.com/202503042132/86fc3c539dc7c337643a4730a443127f/v2/ab0b53d67e58f747f4753e597401ce52/KGTX/CLTX002/ab0b53d67e58f747f4753e597401ce52.mp4'
    },
    {
      title: '檀健次 - 微懂与暧昧',
      cover: 'https://p3fx.kgimg.com/mvpic/24/60/24609bd6b4c9d982bb6206a7d7b06ee5.jpg',
      mv_url:'https://mvwebfs.kugou.com/202503042133/2c5ce7cd06abf65113125c2b3e404f5e/KGTX/CLTX002/1e636b2bc2fd5206a1386f430efa8e54.mp4'
    }
  ],
  '日韩精选': [
    {
      title: "JISOO - 'earthquake' Official MV",
      cover: 'https://p3fx.kgimg.com/mvpic/c0/eb/c0ebfef80a715b143e9609f9678d92fc.jpg',
      mv_url:'https://mvwebfs.tx.kugou.com/202503042133/ec203e030297acc8a5499cf5ff55cb1d/v2/8a6de71907787e11f5db0fd2743eaf19/KGTX/CLTX002/8a6de71907787e11f5db0fd2743eaf19.mp4'
    },
    {
      title: 'SMTOWN - SMTOWN《Thank You》MV',
      cover: 'https://p3fx.kgimg.com/mvpic/52/0d/520d026f3713149b197e609c0474efe6.jpg',
      mv_url:'https://mvwebfs.tx.kugou.com/202503042134/a11068e48b1ee2d3017d865e2824c77b/v2/154a0afd0b4cf3318620c9a22534df70/KGTX/CLTX002/154a0afd0b4cf3318620c9a22534df70.mp4'
    }
  ],
  '欧美精选': [
    {
      title: 'AUR - Kabhi Kabhi',
      cover: 'https://p3fx.kgimg.com/mvpic/8c/b6/8cb6c82d9474b1b65c6af33d35c40aa1.jpg',
      mv_url:'https://mvwebfs.tx.kugou.com/202503042134/85e1d14d1a5efdf14caa2e5044e7c1c2/v2/c91dfaccd6d9d31daae732034316a3f8/KGTX/CLTX002/c91dfaccd6d9d31daae732034316a3f8.mp4'
    },
    {
      title: 'TOBi、snoid - Pandora',
      cover: 'https://p3fx.kgimg.com/mvpic/ed/8a/ed8a41116202d14cda55a1ebdd0f3ebc.jpg',
      mv_url:'https://mvwebfs.kugou.com/202503042135/cab8c98bf23ee680e3bf52df05449cbb/KGTX/CLTX002/0b097912121e652abd56a500151d84d6.mp4'
    }
  ]
}

// 使用计算属性来获取当前应该显示的歌曲列表
const newSongsList = computed(() => {
  const category = currentCategory.value
  if (category === '新歌推荐') {
    // 显示所有分类的歌曲
    return Object.values(allNewSongs).flat()
  } else {
    // 显示特定分类的歌曲
    return allNewSongs[category] || []
  }
})

// 添加视频播放相关的状态
const dialogVisible = ref(false)
const currentMV = ref({
  title: '',
  mv_url: ''
})

// 播放MV的方法
const playMV = (mv) => {
  currentMV.value = mv
  dialogVisible.value = true
}

// 关闭对话框的处理方法
const handleClose = () => {
  dialogVisible.value = false
  currentMV.value = { title: '', mv_url: '' }
}
</script>

<style scoped lang="scss">
.recommendation-mv {
  padding: 20px;
  background-color: #f5f5f5;

  .nav-box {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4px;
    padding: 0;

    .nav-list {
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;

      .nav-item {
        flex: 1;
        font-size: 15px;
        color: #333;
        text-decoration: none;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-weight: 500;
        transition: color 0.3s;
        margin: 0;

        &:hover {
          color: #2d8cf0;
        }

        &.router-link-active {
          color: #2d8cf0;
          font-weight: 600;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background-color: #2d8cf0;
            border-radius: 1px;
          }
        }

        &:not(:last-child)::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 14px;
          background-color: #e5e5e5;
        }
      }
    }
  }

  .top-section {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 10px auto;

    .carousel-box {
      flex: 2;
      border-radius: 4px;
      overflow: hidden;
      background-color: #fff;
      height: 388px;
      position: relative;

      :deep(.el-carousel) {
        height: 100%;

        .el-carousel__container {
          height: 100%;
        }

        .carousel-content {
          height: 100%;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
          cursor: pointer;

          &:hover {
            .play-icon {
              opacity: 1;
            }
          }

          .mv-info {
            position: absolute;
            bottom: 2px;
            left: 2px;
            right: 2px;
            z-index: 2;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 8px 12px;
            border-radius: 4px;

            .mv-name {
              font-size: 14px;
              font-weight: 500;
              transition: all 0.3s ease;
            }

            .mv-author {
              font-size: 14px;
              opacity: 0.8;
              transition: all 0.3s ease;
            }

            .play-icon {
              width: 14px;
              height: 14px;
              border-radius: 50%;
              background-color: rgba(255, 255, 255, 0.9);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 5px;
              transition: all 0.3s ease;
              line-height: 24px;

              i {
                font-size: 10px;
                color: #2d8cf0;
                transition: color 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
              }
            }

            &:hover {
              .mv-name, .mv-author {
                text-decoration: underline;
                text-underline-offset: 2px;
              }
            }
          }
        }

        .carousel-overlay {
          display: none;
        }

        .el-carousel__indicators {
          bottom: 10px;
          right: 10px;
          left: auto;
          transform: none;
          width: auto;
          z-index: 3;
          
          .el-carousel__button {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.4);
            transition: all 0.3s;
            cursor: pointer;

            &:hover {
              background-color: rgba(45, 140, 240, 0.8);
            }
          }

          .el-carousel__indicator {
            padding: 3px;

            &:hover {
              .el-carousel__button {
                background-color: rgba(45, 140, 240, 0.8);
              }
            }

            &.is-active {
              .el-carousel__button {
                background-color: #2d8cf0;
                transform: scale(1.2);
              }
            }
          }
        }
      }
    }

    .mv-ranking {
      flex: 1;
      background-color: #fff;
      border-radius: 4px;
      padding: 5px;

      .ranking-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        h3 {
          font-size: 16px;
          font-weight: 600;
          color: #333;
          
          &::before {
            content: '';
            display: inline-block;
            width: 3px;
            height: 16px;
            background-color: #ffb800;
            margin-right: 8px;
            vertical-align: -2px;
          }
        }
      }

      .ranking-list {
        .ranking-item {
          display: flex;
          align-items: center;
          cursor: pointer;
          position: relative;

          &:hover {
            background-color: rgba(0, 0, 0, 0.5);
            .mv-title {
              color: #fff;
            }
            .play-icon {
              opacity: 1;
            }
          }

          .rank-number {
            width: 20px;
            text-align: center;
            font-size: 14px;
            color: #999;
            margin-right: 8px;

            &.top-three {
              color: #ffb800;
              font-weight: bold;
            }
          }

          .mv-info {
            flex: 1;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.5);
            padding: 6px 10px;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .mv-title {
              font-size: 14px;
              color: #333;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              transition: color 0.3s;
            }

            .play-icon {
              opacity: 0;
              transition: opacity 0.3s;
              margin-left: 8px;
              
              i {
                font-size: 16px;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }

  .bottom-section {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;

    .mv-categories {
      width: 200px;
      background-color: #fff;
      border-radius: 4px;
      overflow: hidden;

      .category-header {
        height: 40px;
        line-height: 40px;
        background-color: #eee;
        color: #333;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
      }

      .category-list {
        .category-item {
          height: 40px;
          line-height: 40px;
          padding: 0 20px;
          font-size: 14px;
          color: #333;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background-color: #2d8cf0;
            color: #fff;
          }

          &.active {
            background-color: #2d8cf0;
            color: #fff;
          }
        }
      }
    }

    .new-songs {
      flex: 1;
      background-color: #fff;
      border-radius: 4px;

      .section-header {
        height: 40px;
        line-height: 40px;
        background-color: #eee;
        color: #333;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
      }

      .region-tabs {
        display: flex;
        gap: 20px;
        margin-bottom: 15px;
        padding: 0 10px;

        .tab-item {
          font-size: 14px;
          color: #666;
          cursor: pointer;
          padding: 5px 10px;
          border-radius: 15px;
          transition: all 0.3s;

          &:hover {
            color: #2d8cf0;
          }

          &.active {
            color: #fff;
            background-color: #2d8cf0;
          }
        }
      }

      .song-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0 10px;

        .song-item {
          width: calc((100% - 80px) / 5); // 5个item，4个间隔（20px * 4 = 80px）
          cursor: pointer;

          .song-cover {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; // 16:9 比例
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 8px;

            img {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .play-icon {
              position: absolute;
              right: 8px;
              bottom: 8px;
              width: 24px;
              height: 24px;
              background-color: rgba(255, 255, 255, 0.9);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity 0.3s;

              i {
                font-size: 12px;
                color: #2d8cf0;
              }
            }

            &:hover .play-icon {
              opacity: 1;
            }
          }

          .song-info {
            .song-title {
              font-size: 14px;
              color: #333;
              margin-bottom: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              &:hover {
                color: #2d8cf0;
              }
            }

            .song-artist {
              font-size: 12px;
              color: #666;
              margin-bottom: 2px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .song-date {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }
}

// 添加一些视频播放器相关的样式
:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;

  .el-dialog__header {
    background-color: #f5f5f5;
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  .el-dialog__body {
    padding: 20px;
  }

  video {
    border-radius: 4px;
  }
}
</style>